<template>
	<div class="screen_wrap echarts_box flex_wrap">
        <corner></corner>
        <title1 title="一周异常事件统计"></title1>
		<div class="flex_body">
			<e-chart :options="option" style="height:100%"></e-chart>
		</div>
	</div>	
</template>
<script>
	import {getAbnormalInfoNum} from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'		
	export default {
		components: {
			corner,title1
		},				
		data() {
			return {
				option: null,
				XName: [],
				img: [
					'image://',
					'image://',
					'image://',
					'image://',
				],
				data1 : [],
				data: [{
					coords: []
				}]
			}
		},
		mounted() {
			this.initData()			
		},
		methods: {
			initData(){
				getAbnormalInfoNum().then(res=>{
					res.data.data.forEach(item=>{
					  let arr=[]
					  this.XName.push(item.time)
					  this.data1.push(item.num)
					  arr.push(item.time,item.num)
					  this.data[0].coords.push(arr)
					})
					console.log(this.data)
					this.init()
				})
			},
			init() {
				this.option = {
					grid: {
						left: '10%',
						top: '11%',
						bottom: '14%',
						right: '5%',
					},
					yAxis: [{
						type: 'value',
						position: 'left',
						nameTextStyle: {
							color: '#00FFFF'
						},
						splitLine: {
							lineStyle: {
								type: 'dashed',
								color: 'rgba(135,140,147,0.8)'
							}
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							formatter: '{value}',
							color: this.$fontColor,
							fontSize: 12
						}
					}, ],
					xAxis: [{
						type: 'category',
						axisTick: {
							show: false
						},
						axisLine: {
							show: false,
							lineStyle: {
								color: '#0696f9',
							}
						},
						axisLabel: {
							inside: false,
							textStyle: {
								color: this.$fontColor, // x轴颜色
								fontWeight: 'normal',
								fontSize: 12,
								lineHeight: 22
							}

						},
						data: this.XName,
					}],
					series: [{
							symbolSize: 150,
							symbol: this.img[2],
							name: '小灯光',
							type: "line",
							data: this.data1,
							itemStyle: {
								normal: {
									borderWidth: 5,
									color: '#0696f9',
								}
							}
						},
						{
							name: '滑行的光点',
							type: 'lines',
							coordinateSystem: 'cartesian2d',
							symbolSize: 30,
							polyline: true,
							effect: {
								show: true,
								trailLength: 0,
								symbol: "arrow",
								period: 3, //光点滑动速度
								symbolSize: 150,
								symbol: this.img[2]
							},
							lineStyle: {
								normal: {
									width: 1,
									opacity: 0.6,
									curveness: 0.2
								}
							},
							data: this.data
						}
					],
				}
			}
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	

	
	.body {
		flex: 1;
	}
</style>